<template>
  <!-- 登录页面 -->
  <div class="login flex flexC">
    <div>
      <h2 class="fs22 cff tac usn">火星外卖管理系统</h2>

      <!-- 登录表单：
      1. :model="loginForm"：表单数据对象
      2. :rules="rules"：用于表单验证规则
      3. ref="loginForm"：ref是vue中获取dom的语法，在js中使用this.$refs.loginForm来获取到el-form元素
      4. size="medium/small/mini"：用于控制该表单内组件的尺寸 -->
      <el-form :model="loginForm" :rules="rules" ref="loginForm" size="mini">
        <!-- 1. 用户名
        1.1 prop="uname"：表单域model字段，在使用validate、resetFields方法的情况下，该属性是必填的
        1.2 v-model：定义在data当中，双向绑定的数据
        1.3 prefix-icon：在input开头添加图标
        1.4 suffix-icon：在input末尾添加图标 -->
        <el-form-item prop="uname">
          <el-input
            v-model="loginForm.uname"
            prefix-icon="iconfont icon-yonghu"
          ></el-input>
        </el-form-item>

        <!-- 2. 密码 -->
        <el-form-item prop="pass">
          <el-input
            v-model="loginForm.pass"
            prefix-icon="iconfont icon-mima"
            autocomplete="off"
            :type="showPass ? 'text' : 'password'"
          >
            <!-- 3. 密码输入框切换显示隐藏：
            思路：改变input框的type属性，显示（text）隐藏（password）
            3.1 图标注册点击事件：不能在input上写suffix-icon属性，只能通过插槽方式添加一个图标dom，再给dom注册点击事件
            3.2 改变显示隐藏：判断标杆showPass的值，显示隐藏（:type="showPass ? 'text' : 'password'"）
            3.3 改变图标样式：判断标杆showPass的值，显示不同的图标样式（:class="showPass ? 'icon-eyes-' : 'icon-eyes'"） -->
            <template #suffix
              ><i
                class="iconfont cp"
                :class="showPass ? 'icon-eyes-' : 'icon-eyes'"
                @click="showPass = !showPass"
              ></i>
            </template>
          </el-input>
        </el-form-item>

        <!-- 4. 登录按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')"
            >登&nbsp;&nbsp;&nbsp;录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/users.js' // 请求：登录

export default {
  data() {
    var checkName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      /* 双向绑定数据 */
      loginForm: {
        uname: '',
        pass: ''
      },

      /* 规则控制（规则里面的字段和数据的字段保持一致） */
      rules: {
        // validator：校验器   trigger：触发方式   blur：失去焦点
        uname: [{ validator: checkName, trigger: 'blur' }],
        pass: [{ validator: validatePass, trigger: 'blur' }]
      },

      /* 密码输入框切换显示隐藏 */
      showPass: false
    }
  },

  methods: {
    /* 登录按钮 */
    submitForm(formName) {
      // validate：el-form验证所有规则是否通过的方法，通过返回true，不通过返回false
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          /* 请求参数说明：
          account：账号，String
          password：密码，String */

          /* 响应参数说明：
          code：状态码，0代表成功，1代表失败，5001参数错误
          msg：提示信息
          token：接口鉴权的令牌token
          role：当前用户角色 */

          // 1. 发送登录请求
          const { code, msg, token } = await login({
            account: this.loginForm.uname,
            password: this.loginForm.pass
          })

          // 2. 判断状态码提示登录成功或失败
          if (code === 0) {
            /* 登录成功 */

            // 3. 提示登录成功信息
            this.$message.success({
              center: true,
              message: msg
            })

            // 4. 把token存到本地存储当中
            localStorage.setItem('token', token)

            // 5. 跳转到后台首页（模拟1s延迟）
            setTimeout(() => {
              this.$router.push('/')
            }, 1000)
          } else {
            /* 登录失败 */

            // 6. 提示登录失败信息
            this.$message.error({
              center: true,
              message: msg
            })
          }
        } else {
          // 7. 提示前端表单规则验证不通过的信息
          this.$message.warning({
            center: true,
            message: '输入错误，请按照规则填写表单！'
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/* 高度100% */
.login {
  height: 100%;
  background-color: #2d3a4b;
  > div {
    width: 340px;
    h2 {
      letter-spacing: 10px;
      margin-bottom: 30px;
    }
    .el-form-item {
      font-size: 22px;
      margin-bottom: 26px;
      .el-input {
        font-size: 14px;
      }
      .el-button {
        font-size: 16px;
        width: 100%;
      }
    }
  }
}
</style>
